<!--
/**
 * Created by PhpStorm.
 * User: Devmc
 * Date: 2021/4/22
 * Time: 12:41
 */
-->
<template>
  <div class="table-title">
    <div class="title">
      <i :class="icon"></i>
      <span>{{ title }}</span>
    </div>


    <template v-if="showButton">
      <el-button
          v-if="buttonMode == 'default'"
          class="button"
          type="success"
          :icon="buttonIcon || 'el-icon-edit'"
          @click="onButtonClick">
        {{ buttonText }}
      </el-button>

      <el-button
          v-else
          round
          size="mini"
          class="button back"
          icon="el-icon-arrow-left"
          @click="onButtonClick">
        返回
      </el-button>
    </template>
  </div>
</template>

<script>
export default {
  name: "TableTitle",
  props: {
    icon: {
      type: String,
      default: 'el-icon-s-order'
    },
    title: String,
    showButton: {
      type: Boolean,
      default: true
    },
    buttonText: String,
    buttonIcon: String,
    // default back
    buttonMode: {
      type: String,
      default: 'default'
    },
    backPath: String
  },
  data() {
    return {}
  },
  created() {

  },
  mounted() {

  },
  methods: {
    onButtonClick() {
      // 返回
      if (this.buttonMode == 'back') {
        if (this.backPath) this.$router.replace(this.backPath);
        else this.$router.go(-1);
      }
      // 点击按钮
      this.$emit('click');
    }
  },
  watch: {}
}
</script>

<style lang="less">
.table-title {
  padding: 12px 20px;
  border-bottom: 1px solid #e7eaec;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .title {
    flex-grow: 1;

    i {
      margin-right: 2px;
    }
  }

  .button.back {
    padding: 10px;
  }
}
</style>